<template>
  <x-header class="tilte-header" :left-options="{preventGoBack: notBack}" @on-click-back="turnToMy">
    <span style="color: #333;">{{title}}</span>
  </x-header>
</template>
<script>
import { XHeader } from 'vux'
export default {
  components: {
    XHeader
  },
  props: {
    back: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    }
  },
  data () {
    return {
      notBack: this.back
    }
  },
  methods: {
    changeStyle () {
      document.getElementsByClassName('vux-header-back')[0].style.color =
        'rgb(158, 158, 158)'
      document.getElementsByClassName('vux-header-back')[0].style.fontSize =
        '1rem'
    },
    turnToMy () {
      this.$router.push('/my')
    }
  },
  mounted () {
    this.changeStyle()
  }
}
</script>
<style scoped>
.tilte-header {
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
}
</style>